<% layout('/layouts/default.html', {title: '拆而未尽', libs: ['dataGrid']}){ %>
<style>
	.bindOne{
		border-radius: 4px;
		margin: 0px 5px 10px 5px;
		height: 300px;
		text-align: center;
		background: #fff;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s,-webkit-transform .3s;
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.BoxTitAll{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		height: 15%;
		height: 40px;
	}
	.tabBody li{
		display: inline-block;
		margin-right: 20px;
		font-size:14px;
	}
	.tabActive{
		color: #1F69E6;
		border-bottom: 2px solid #1F69E6;
	}
	.defaultColor_text{
		font-size: 14px;
		margin: 0 8px;
		color: #000000;
		line-height: 40px;
		height: 40px;
	}
	.handTable{
		width: 100%;
		height: 85%;
	}
	.col-md-6,.col-md-4,.col-md-8{
		padding: 5px 10px 0px 2px!important;
	}

	.jqgridborder{
		border-bottom: 1px dashed #CCC !important;
	}

	.ui-jqgrid .ui-priority-secondary{
		background: white !important;
	}

	.ui-row-ltr{
		border: 0px !important;
	}

	#gview_noticeNotice .ui-jqgrid-hbox{
		display: none;
	}

	#gbox_noticeNotice{
		border: none;
	}

	#gview_todolist .ui-jqgrid-hbox{
		display: none;
	}

	#gbox_todolist{
		border: none;
	}

	#todolist tr td{
		border: none;
		border-bottom: 1px dashed #CCC;
	}

	#noticeNotice tr td{
		border: none;
	}

	#noticeNotice tr td{
		border-bottom: 1px dashed #CCC;
	}

	.jqgfirstrow td{
		border-bottom: none !important;
	}

	#taskAlertInformationDataGrid tr{
		cursor:pointer;
	}

	#noticeNotice tr{
		cursor:pointer;
	}

	#todolist tr{
		cursor:pointer;
	}

	#noticeNotice tr:hover{
		text-decoration:underline;
		color: rgb(31, 105, 230);
	}

	#todolist tr:hover{
		text-decoration:underline;
		color: rgb(31, 105, 230);
	}
	/*全市概况*/
	.handZong{
		width: 100%;
		line-height: 50px;
		padding-left:10px;
		padding-bottom: 10px;
	}
	.handZong p{
		text-align: left;
		font-size: 20px;
		font-weight: bold;
	}
	.handZong p span {
		display: inline-block;
		padding-right:10px
	}
	.handZong p span b{
		display: inline-block;
		padding:0px 20px;
	}
	.blue{
		color: #0066cc;
	}
	.green{
		color: #008a00;
	}
	.red{
		color: #e60000;
	}
	.bindQuan{
		border-radius: 4px;
		margin: 0px 5px 16px 5px;
		text-align: center;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s,-webkit-transform .3s;
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #fff;
	}
	.bindge{
		border-radius: 4px;
		margin: 0px 5px 16px 5px;
		text-align: center;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s,-webkit-transform .3s;
		padding: 0 10px;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		background: #fff;
		/*height: 410px;*/
	}
	.jingTitle{
		line-height: 100px;
		text-align: center;
		font-weight: 800;
		font-size: 20px;
		background: #ffffff;
		margin-bottom: 16px;
	}
	.conceptList li{
		width: 50%;
		float: left;
		font-size: 20px;
		font-weight: bold;
		list-style: none;
		text-align: left;
		line-height: 50px;
		color: #cccccc;
	}

</style>
<div class="content pb0">
	<div class="box box-main">
		<div class="box-header">
			<ul class="nav nav-tabs bangPing-tabs">
				<li><a href="${ctx}/dataview/dcSupImportData/pageOne">${text('专项统计')}</a></li>
				<li ><a href="${ctx}/dataview/dcSupImportData/pageTwo">${text('数据分析')}</a></li>
				<li class="active"><a href="${ctx}/dataview/dcSupImportData/pageThree">${text('各区对比')}</a></li>
				<% if(hasRole('data_board_import') || @UserUtils.getUser().getUserCode() == 'system'){ %>
					<li ><a href="${ctx}/dataview/dcSupImportData/list">${text('数据导入')}</a></li>
				<% } %>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="col-md-6">
			<div class="bindge" style="height: 340px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">最新完成户数</h1>
				</div>
				<div class="handTable" id="newestEchart">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindge" style="height: 340px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">每日未完成率对比</h1>
				</div>
				<div class="handTable" id="unaccomplishedEchart">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindge" style="height: 340px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">已净地项目数</h1>
				</div>
				<div class="handTable" id="clearedEchart">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindge" style="height: 340px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">推进速度对比（周速度=7日完成户数/7天)</h1>
				</div>
				<div class="handTable" id="propulsionEchart">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindge" style="height: 480px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">2021年计划和实际完成数量对比</h1>
				</div>
				<div class="handTable" id="actualEchart">

				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="bindge" style="height: 480px">
				<div class="BoxTitAll">
					<h1 class="defaultColor_text">2022年计划和实际完成户数对比</h1>
				</div>
				<div class="handTable" id="completionEchart">

				</div>
			</div>
		</div>
	</div>

</div>
<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
	var newestEchart, unaccomplishedEchart,clearedEchart,propulsionEchart,actualEchart,completion;
	$(function () {
    window.addEventListener("resize", () => {
		newestEchart.resize();
		unaccomplishedEchart.resize();
		clearedEchart.resize();
		propulsionEchart.resize();
		actualEchart.resize();
		completion.resize();
    });
  });

	// 最新完成户数
	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query1",
		success:function(res){
			getNewestEchart(res)
		}
	});

	function getNewestEchart(res){
		newestEchart = echarts.init(document.getElementById('newestEchart'), 'default');
		newestEchart.setOption({
			tooltip: {
				trigger: 'item'
			},
			color:['#509AF2'],
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: res.nameList
			},
			series: [
				{
					data: res.valueList,
					type: 'bar',
					name: 'Email',
				}
			]
		})
	}
	//每日未完成率对比
	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query2",
		success:function(res){
			getUnaccomplishedEchart(res)
		}
	});

	function getUnaccomplishedEchart(res){
		unaccomplishedEchart = echarts.init(document.getElementById('unaccomplishedEchart'), 'default');
		unaccomplishedEchart.setOption({
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: res.nameListjinhu
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: res.nameListjinhu
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					name: '镜湖区',
					type: 'line',
					stack: 'Total',
					data: res.valueListjinhu
				},
				{
					name: '弋江区',
					type: 'line',
					stack: 'Total',
					data: res.valueListyijiang
				},
				{
					name: '鸠江区',
					type: 'line',
					stack: 'Total',
					data: res.valueListjiujiang
				},
				{
					name: '三山经济开发区',
					type: 'line',
					stack: 'Total',
					data: res.valueListsanshan
				},

			]
		})
	}
//	已净地项目数
	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query3",
		success:function(res){
			getClearedEchart(res)
		}
	});
	function getClearedEchart(res){
		clearedEchart = echarts.init(document.getElementById('clearedEchart'), 'default');
		clearedEchart.setOption({
			tooltip: {
				trigger: 'item'
			},
			color:['#509AF2'],
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: res.nameList
			},
			series: [
				{
					data: res.valueList,
					type: 'bar',
					name: 'Email',
				}
			]
		})
	}
//	推进速度对比（周速度=7日完成户数/7天)

	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query4",
		success:function(res){
			getPropulsionEchart(res)
		}
	});
	function getPropulsionEchart(res){
		propulsionEchart = echarts.init(document.getElementById('propulsionEchart'), 'default');
		propulsionEchart.setOption({
			tooltip: {
				trigger: 'item'
			},
			color:['#509AF2'],
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: res.nameList
			},
			series: [
				{
					data: res.valueList,
					type: 'bar',
					name: 'Email',
				}
			]
		})
	}

//	actualEchart2021年计划和实际完成数量对比
	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query5?param1=2020",
		success:function(res){
			getActualEchart(res)
		}
	});
	function getActualEchart(res){
		actualEchart = echarts.init(document.getElementById('actualEchart'), 'default');
		actualEchart.setOption({
			color:['#509AF2','#3ACF7A'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '0',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: res.nameList
			},
			series: [
				{
					name: '2021计划任务数',
					type: 'bar',
					data: res.valueList2
				},
				{
					name: '2021实际完成数',
					type: 'bar',
					data: res.valueList
				}
			]
		})
	}

//	completionEchart  2022年计划和实际完成户数对比
	$.ajax({
		type: 'get',
		url: "${ctx}/dataview/dcSupImportDataThree/query5?param1=2022",
		success:function(res){
			getCompletionEchart(res)
		}
	});

	function getCompletionEchart(res){
		completionEchart = echarts.init(document.getElementById('completionEchart'), 'default');
		completionEchart.setOption({
			color:['#509AF2','#3ACF7A'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '0',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: res.nameList
			},
			series: [
				{
					name: '2022计划任务数',
					type: 'bar',
					data: res.valueList2
				},
				{
					name: '2022实际完成数',
					type: 'bar',
					data: res.valueList
				}
			]
		})
	}
</script>

